<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋游戏</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        h1 {
            margin-bottom: 20px;
        }

        #game-container {
            position: relative;
            width: 600px;
            height: 600px;
            background-color: #deb887;
            border: 2px solid #333;
        }

        canvas {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }

        #status {
            margin-top: 20px;
            font-size: 18px;
            font-weight: bold;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            margin-top: 20px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>五子棋游戏</h1>
    <div id="game-container">
        <canvas id="chessboard" width="600" height="600"></canvas>
    </div>
    <div id="status">当前玩家：黑棋</div>
    <button onclick="resetGame()">重新开始游戏</button>

    <script>
        const canvas = document.getElementById('chessboard');
        const ctx = canvas.getContext('2d');
        const statusDiv = document.getElementById('status');
        
        const BOARD_SIZE = 15;
        const CELL_SIZE = 40;
        const PADDING = 20;
        let currentPlayer = 'black';
        let gameOver = false;
        let boardState = Array(BOARD_SIZE).fill().map(() => Array(BOARD_SIZE).fill(null));

        // 绘制棋盘
        function drawBoard() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // 绘制网格线
            ctx.beginPath();
            ctx.strokeStyle = '#333';
            
            for (let i = 0; i < BOARD_SIZE; i++) {
                // 横线
                ctx.moveTo(PADDING, PADDING + i * CELL_SIZE);
                ctx.lineTo(canvas.width - PADDING, PADDING + i * CELL_SIZE);
                
                // 竖线
                ctx.moveTo(PADDING + i * CELL_SIZE, PADDING);
                ctx.lineTo(PADDING + i * CELL_SIZE, canvas.height - PADDING);
            }
            
            ctx.stroke();
            
            // 绘制星位
            if (BOARD_SIZE === 15) {
                ctx.fillStyle = '#333';
                const stars = [ [3, 3], [3, 11], [7, 7], [11, 3], [11, 11] ];
                
                stars.forEach(([x, y]) => {
                    ctx.beginPath();
                    ctx.arc(PADDING + x * CELL_SIZE, PADDING + y * CELL_SIZE, 5, 0, Math.PI * 2);
                    ctx.fill();
                });
            }
        }

        // 绘制棋子
        function drawPiece(x, y, color) {
            ctx.beginPath();
            ctx.arc(
                PADDING + x * CELL_SIZE,
                PADDING + y * CELL_SIZE,
                CELL_SIZE / 2 - 2,
                0,
                Math.PI * 2
            );
            ctx.fillStyle = color;
            ctx.fill();
            
            // 添加阴影效果
            ctx.beginPath();
            ctx.arc(
                PADDING + x * CELL_SIZE,
                PADDING + y * CELL_SIZE,
                CELL_SIZE / 2 - 2,
                0,
                Math.PI * 2
            );
            ctx.strokeStyle = '#333';
            ctx.stroke();
        }

        // 处理点击事件
        canvas.addEventListener('click', (e) => {
            if (gameOver) return;
            
            const rect = canvas.getBoundingClientRect();
            const mouseX = e.clientX - rect.left;
            const mouseY = e.clientY - rect.top;
            
            // 计算最近的交叉点
            const x = Math.round((mouseX - PADDING) / CELL_SIZE);
            const y = Math.round((mouseY - PADDING) / CELL_SIZE);
            
            // 检查是否在棋盘范围内
            if (x >= 0 && x < BOARD_SIZE && y >= 0 && y < BOARD_SIZE && !boardState[x][y]) {
                // 放置棋子
                boardState[x][y] = currentPlayer;
                drawPiece(x, y, currentPlayer);
                
                // 检查胜利条件
                if (checkWin(x, y)) {
                    statusDiv.textContent = `${currentPlayer === 'black' ? '黑棋' : '白棋'} 获胜！`;
                    gameOver = true;
                } else {
                    // 切换玩家
                    currentPlayer = currentPlayer === 'black' ? 'white' : 'black';
                    statusDiv.textContent = `当前玩家：${currentPlayer === 'black' ? '黑棋' : '白棋'}`;
                }
            }
        });

        // 检查胜利条件（五子连珠）
        function checkWin(x, y) {
            const directions = [
                [[1, 0], [-1, 0]],     // 水平方向
                [[0, 1], [0, -1]],     // 垂直方向
                [[1, 1], [-1, -1]],     // 对角线 \ 方向
                [[1, -1], [-1, 1]]      // 对角线 / 方向
            ];
            
            for (const [dir1, dir2] of directions) {
                let count = 1;
                
                // 检查第一个方向
                count += countDirection(x, y, dir1[0], dir1[1]);
                
                // 检查第二个方向
                count += countDirection(x, y, dir2[0], dir2[1]);
                
                if (count >= 5) {
                    return true;
                }
            }
            
            return false;
        }

        // 在指定方向上计算连续的相同颜色棋子数
        function countDirection(x, y, dx, dy) {
            let count = 0;
            let currentX = x + dx;
            let currentY = y + dy;
            
            while (
                currentX >= 0 && 
                currentX < BOARD_SIZE && 
                currentY >= 0 && 
                currentY < BOARD_SIZE && 
                boardState[currentX][currentY] === currentPlayer
            ) {
                count++;
                currentX += dx;
                currentY += dy;
            }
            
            return count;
        }

        // 重置游戏
        function resetGame() {
            currentPlayer = 'black';
            gameOver = false;
            boardState = Array(BOARD_SIZE).fill().map(() => Array(BOARD_SIZE).fill(null));
            statusDiv.textContent = `当前玩家：黑棋`;
            drawBoard();
        }

        // 初始化游戏
        drawBoard();
    </script>
</body>
</html>